<!--
 * @Author: zhang ke
 * @Date: 2025-07-04 11:16:22
 * @LastEditors: your name
 * @LastEditTime: 2025-07-04 19:37:40
 * @Description: 
 * @FilePath: \vue3-admin\src\views\screen\components\age.vue
-->
<template>
  <div class="wrapper">
    <!-- 头部区域 -->
    <div class="title-wrapper">
      <div class="title">年龄比例</div>
      <img class="title-icon" src="../images/dataScreen-title.png" />
    </div>
    <div class="content-wrapper">
      <div class="echarts" ref="ageRef"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
let ageRef = ref()
onMounted(() => {
  ageEcharts()
})
const ageEcharts = () => {
  const chart = echarts.init(ageRef.value)
  const option = {
    title:{
      text:'本日总数',
      left:'21.5%',
      top:'39%',
      textSyle:{
        fontSize:14,
        color:'#cadbe3',
        align:'center'
      }
    },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: 20,
    right:40,
    orient: 'vertical', //图例组件方向的设置
    textStyle:{
      color:'#ffffff'
    }
  },
  series: [

    {
      name: '年龄比例',
      type: 'pie',
      radius: ['40%', '70%'],
      center:['30%','42%'],//饼图位置
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        // borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        normal:{
          position:'inner',//数值现在到饼图内
          show:true,
          formatter:'{d}%',
          color:'#ffffff',
        }
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 10,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: true,
      },
      data: [
        { value: 16, name: '10岁以下   16%' },
        { value: 8, name: '10-18岁   8%' },
        { value: 12, name: '18-23岁  12%' },
        { value: 24, name: '30-40岁  24%' },
        { value: 20, name: '40-60岁  20%' },
        { value: 20, name: '60岁以上  20%' }
      ]
    }
  ]
};
  chart.setOption(option)
}
</script>

<style scoped lang="scss">
.wrapper {
  margin-top: 24px;
  width: 100%;
  height: 300px;
  background: url(../images/dataScreen-main-lc.png) no-repeat;
  background-size: cover;

  .title-wrapper {
    padding-left: 10px;

    .title {
      color: white;
      font-size: 20px;
      margin-bottom: 2px;
    }

    .title-icon {
      width: 50px;
    }
  }

  .content-wrapper {
    margin-top: 24px;

    .echarts {
      width: 100%;
      height: 280px;
      // background: #bfc;
    }
  }
}
</style>
